<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-form label-width="80px">
				<el-form-item label="报社名称">
					<el-input size="small" v-model="newspaper" @input="queryFundManagerList" />
					<el-button
						icon="el-icon-search"
						size="mini"
						type="primary"
						@click="queryFundManagerList"
						:loading="searchLoading"
						:disabled="searchLoading"
						>查询</el-button
					>
				</el-form-item>
			</el-form>

			<el-button size="mini" type="primary" @click="newFunc('新增')" icon="el-icon-circle-plus-outline">新 增</el-button>
		</el-header>
		<el-main>
			<el-table
				:data="tableData"
				border
				style="width: 100%"
				:header-cell-style="{ background: '#FAFAFA' }"
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column prop="newspaper" label="报社名称">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="newspaper" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="newspaperEmail" label="报社邮箱">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="newspaperEmail" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="name" label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="warning" icon="el-icon-edit" @click="newFunc('编辑', scope.row)">编 辑</el-button>
						<el-button size="mini" type="danger" icon="el-icon-delete" @click="delFunc(scope.row)">删 除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:disabled="searchLoading"
				:page-size="paging.size"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="paging.num"
				:page-sizes="paging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging.total"
			/>
		</el-main>

		<addNewspaper
			:title="title"
			:addComShow="addComShow"
			@comIsShow="comIsShow"
			@queryFundManagerList="queryFundManagerList"
			ref="addNewspaper"
		/>
	</el-container>
</template>
<script>
import addNewspaper from './components/addNewspaper.vue' // 弹框组件
import { getNewspaperList, delNewspaper } from '@/api/productApi/newspaper'
import { debounce } from '@/utils/debounceFunc'
import { SpecialReplace } from '@/utils/characters'
export default {
	name: 'Newspaper',
	components: {
		addNewspaper
	},

	data() {
		return {
			tableData: [],
			addComShow: false,
			title: '',
			newspaper: '',
			// 分页配置
			paging: {
				// 显示的条目数
				size: 10,
				// 当前页数
				num: 1,
				total: 0,
				pages: 0,
				sizes: [10, 20, 50, 100]
			},
			searchLoading: false
		}
	},

	mounted() {
		this.queryFundManagerList()
	},

	methods: {
		comIsShow() {
			this.addComShow = !this.addComShow
		},

		newFunc(title, obj) {
			this.title = title
			this.comIsShow()
			if (obj) {
				this.$refs.addNewspaper.edit(obj)
			}
		},

		delFunc(obj) {
			this.operatorComfirm(() => {
				delNewspaper(obj).then(res => {
					if (res.msgCode === 'Y') {
						this.$message({ type: 'success', message: res.msgDesc })
						this.queryFundManagerList()
					}
				})
			}, `删除该报社`)
		},

		queryFundManagerList: debounce(function() {
			if (SpecialReplace(this.newspaper, false)) {
				return
			}
			this.searchLoading = true
			getNewspaperList({ newspaper: this.newspaper }, this.paging)
				.then(res => {
					if (res.msgCode === 'Y') {
						this.tableData = res.data.body
						this.paging.total = res.data.page ? res.data.page.total : this.tableData.length
					}
				})
				.finally(() => {
					this.searchLoading = false
				})
		}, 300),
		// 改变页数
		handleCurrentChange(val) {
			this.paging.num = val
			this.queryFundManagerList()
		},
		// 改变条数
		handleSizeChange(val) {
            this.paging.num = 1
			this.paging.size = val
			this.queryFundManagerList()
		}
	}
}
</script>
<style lang="scss" src='./index.scss' scoped>
</style>
